<template>
  <div id="detail">
    <nav-bar>
      <template v-slot:left></template>
      <template v-slot:default>商品详情</template>
      <template v-slot:right></template>
    </nav-bar>

    <!-- 商品图片 -->
    <van-image
        width="100%"
        lazy-load
        :src="detail.cover_url"
        style="margin-top: 45px"
    />

    <!-- 商品卡片 -->
    <van-card style="text-align: left">
      <template #title>
        <div class="title">{{detail.title}}</div>
      </template>
      <template #desc>
        <div class="desc">{{detail.description}}</div>
      </template>
      <template #tags>
        <div class="tags">
          <van-tag plain type="danger" class="tag">新书</van-tag>
          <van-tag plain type="danger" class="tag">推荐</van-tag>
          <van-tag plain type="danger" class="tag">特价</van-tag>
          <van-tag plain type="danger" class="tag">节日活动</van-tag>
        </div>
      </template>
      <template #price>
        <div class="price"><small>￥</small>{{detail.price}}.00</div>
      </template>
      <template #num>
        <div class="num">剩余 {{detail.stock}} 件</div>
      </template>
      <template #bottom>
        <div class="stepper">
          <p class="buy">我要买</p>
          <van-stepper v-model="num" min="1" :max="detail.stock" style="margin-bottom: 10px"/>
        </div>
      </template>
      <template #footer>
        <div class="foot">
          <button class="collect" @click="collectClick(detail.id)">
            <span v-if="isCollect" class="collect-item">
              <img src="~assets/images/collect1.png" alt="">
              <span>已收藏</span>
            </span>
            <span v-else class="collect-item">
              <img src="~assets/images/collect.png" alt="">
              <span>收藏</span>
            </span>
          </button>
          <van-button type="warning" @click="handleAddCart">加入购物车</van-button>
          <van-button type="danger" @click="goToCart">立即购买</van-button>
        </div>
      </template>
    </van-card>

    <!-- 概述，热评，相关评论 -->
    <van-tabs v-model="active" sticky offset-top="45">
      <van-badge :content="detail.comments.length" max="99" style="position:relative;top:-35px;right:-5px"/>
      <van-tab title="概述">
        <div class="con" v-html="detail.details"></div>
      </van-tab>
      <van-tab title="热评">
        <div v-if="detail.comments.length === 0">
          <van-empty description="该商品还没有评论，快去发表评论吧！">
            <van-button round type="danger" class="bottom-button">发表评论</van-button>
          </van-empty>
        </div>
        <div v-else>

        </div>
      </van-tab>
      <van-tab title="相关图书">
        <goods-list :goods="like_goods"></goods-list>
      </van-tab>
    </van-tabs>

  </div>
</template>

<script>
import NavBar from "components/common/navbar/NavBar";
import GoodsList from "components/content/goods/GoodsList";
import {getDetail} from "network/detail";
import {addCart} from "network/cart";
import {setCollect} from "network/collect";

import {ref, reactive, toRefs, onMounted} from "vue";
import {useRoute, useRouter} from 'vue-router'
import {useStore} from 'vuex'
import {Toast} from 'vant'

export default {
  name: "Detail",
  components: {
    NavBar, GoodsList
  },
  setup() {
    const route = useRoute()
    const router = useRouter()
    const store = useStore()
    const id = ref(0)
    const active = ref(0)
    const isCollect = ref(false)

    // 数据模型
    const book = reactive({
      detail: {
        comments: []
      },
      like_goods: []
    })

    // 商品收藏/取消收藏
    const collectClick = id => {
      setCollect(id).then(res => {
        if (res.status === 201) {
          isCollect.value = true
          Toast.success('收藏成功！')
        } else if (res.status === 204) {
          isCollect.value = false
          Toast.success('取消收藏成功！')
        }
      })
    }

    // 添加购物车
    const num = ref(1)
    const handleAddCart = () => {
      addCart({
        goods_id: book.detail.id,
        num: num.value
      }).then(res => {
        if (res.status === 201 || res.status === 204) {
          store.dispatch('updateCart')
          Toast.success('添加成功')
        }
      })
    }

    // 立即购买
    const goToCart = () => {
      addCart({
        goods_id: book.detail.id,
        num: num.value
      }).then(res => {
        if (res.status === 201 || res.status === 204) {
          store.dispatch('updateCart')
          router.push({name: 'ShopCart'})
        }
      })
    }

    onMounted(() => {
      id.value = route.params.id ?? 0
      getDetail(id.value).then(res => {
        book.detail = res.goods
        book.like_goods = res.like_goods
        isCollect.value = !!res.goods.is_collect
      })
    })

    return {
      id, active, isCollect, ...toRefs(book), handleAddCart, goToCart, num, collectClick
    }
  }
}
</script>

<style scoped lang="scss">
#detail {
  padding-bottom: 50px;
  .title {
    width: 100%;
    background: var(--color-tint);
    padding: 5px 0;
    color: white;
    font-size: 18px;
    font-weight: bold;
    text-align: center;
  }
  .desc {
    margin: 20px 0;
  }
  .tags {
    .tag {
      margin-right: 5px;
    }
  }
  .price {
    margin: 5px 0;
    color: #ff6a00;
    font-size: 16px;
  }
  .stepper {
    display: flex;
    justify-content: space-between;
    .buy {
      color: var(--color-text)
    }
  }
  .foot {
    margin: 10px 0;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    .collect {
      border: none;
      background: unset;
      margin-right: 10px;
      .collect-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        img {
          margin-bottom: 5px;
          width:14px;
          height:14px;
        }
      }
    }
  }
}
</style>